<template>
  <section class="c-flex-column" :class="!isSetPageBackground ? 'c-bg-white' : ''">
    <cust-title-com :headLine="item.styleParam && item.styleParam.headLine ? item.styleParam.headLine : null" :titleName="item.title || '专区'" :titleDesc="item.desc" :showMoreType="item.prodItems.showMoreType" :showMore="item.templateType == 1 ? 1 : item.isShowMore" @clickMore="clickMore" v-if="item.isShowTitle"></cust-title-com>
    <div>
      <swiper-com class="c-ph24 c-pb24" :item="item" :pageName="pageName" :upgradeMemberJump="upgradeMemberJump" :swiperIndex="swiperIndex" :isPrefecture="true" v-if="item.templateType == 1"></swiper-com>
      <div class="c-ph24 c-pb34 c-pt20" :style="getVerticalSpacing(marginSettings) + getHorizontalSpacing(marginSettings)" v-if="item.templateType == 2">
        <common-prod-item
          v-if="item.templateType == 2"
          :borderRadius="borderRadius"
          :imageSetting="imageSetting"
          :marginSettings="marginSettings"
          :headLine="headLine"
          :visible="item.visible"
          :modelType="59"
          :itemList="itemList"
          :pageName="pageName"
          :orderBy="item.items.orderBy"
        ></common-prod-item>
      </div>
    </div>
  </section>
</template>
<script>
import custTitleCom from "@/components/templates/custIndexTemp/custTitleCom.vue";
import swiperCom from "@/components/templates/custIndexTemp/swiperCom.vue";
import CommonProdItem from "@/components/templates/commonProdItem.vue";
import { custIndex } from "@/mixin/custIndex.js";
import { appRouterChange } from "@/mixin/appRouterPush.js";
import { getUrlDetail } from "@/utils/goDetails.js";
import { utilJs } from "@/utils/common.js";
import { customStyle } from '@/utils/customStyle.js'
export default {
  mixins: [appRouterChange, custIndex, customStyle],
  components: {
    custTitleCom,
    swiperCom,
    CommonProdItem
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
    pageName: {//首页INDEX 预览页PREVIEW_INDEX 微页面MICRO_PAGE
      type: String,
      default: "INDEX"
    },
    upgradeMemberJump: {
      type: String,
      default: ''
    },
    swiperIndex: {
      type: Number,
      default: ''
    },
  },
  data() {
    return {
      isSetPageBackground: sessionStorage.getItem("isSetPageBackground") || 0
    };
  },
  computed: {
    itemList() {
      return this.item.items.prods.filter(item => {return item.otherStatus != 1})
    },
    borderRadius() {
      return this.item.styleParam && this.item.styleParam.borderRadius ? this.item.styleParam.borderRadius : null
    },
    imageSetting() {
      return this.item.styleParam && this.item.styleParam.imageSetting ? this.item.styleParam.imageSetting : null
    },
    marginSettings() {
      return this.item.styleParam && this.item.styleParam.marginSettings ? this.item.styleParam.marginSettings : null
    },
    headLine() {
      return this.item.styleParam && this.item.styleParam.headLine ? this.item.styleParam.headLine : null
    },
  },
  methods: {
    clickMore() {
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let data = {
        linkModule: this.item.items.linkModule,
        navId: this.item.items.navId,
        url: this.item.items.url,
        navHref: this.item.items.navHref
      }
      data.pageName = this.pageName;
      data.upgradeMemberJump = this.upgradeMemberJump;
      this.commonModuleRouterPush(data)
    },
    linkToDetail(data) { // 跳转详情 根据prodType 和 courseType 判断  训练营特殊 取的是营期id(subId)
      if (this.pageName == 'PREVIEW_INDEX') {
        return;
      }
      let pushUrl = '';
      if ([110, 111, 112].includes(data.prodType)) {
        data.prodType = this.ckfrom.course;
      }
      let prodId = data.prodType == this.ckfrom.camp ? data.subId : data.id;
      pushUrl = getUrlDetail(data.prodType, prodId, '', data.courseType)
      if (!pushUrl) {
        return;
      }
      utilJs.goPage(this, pushUrl, '', 1);
    }
  },
};
</script>

<style scoped>
</style>
